যেকোনো সিএসএস প্রোপার্টি যেমন- color, background-color, margin ইত্যাদি প্রোপার্টির মাধ্যমে লিংকের স্টাইল করা যায়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a {
color: white;
background-color: green;
}
</style>
</head>
<body>
<h2>সিএসএস এর মাধ্যমে লিংক স্টাইল</h2>
<a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a>
</body>
</html>
এছাড়াও লিংকটি কি অবস্থায়(state) আছে তার উপর ভিত্তি করেও পৃথকভাবে লিংকের স্টাইল করা যেতে পারে।
একটি লিংক সচরাচর চারটি অবস্থায় থাকে।
লিংকের অবস্থাসমূহ নিম্নে তুলে ধরা হলোঃ
a:link - এটি একটি স্বাভাবিক লিংক যা ইউজার কর্তৃক এখনো প্রদর্শিতি(visited) হয় নি।a:visited - ইউজার কর্তৃক পরিদর্শিত(visited) একটি লিংক।a:hover - ইউজার কর্তৃক মাউজ কার্সর লিংকের উপর রাখা অবস্থাকে নির্দেশ করে।a:active - ইউজার কর্তৃক ক্লিক করা হয়েছে এমন একটি লিংক।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<p><a href="https://www.sattacademy.com/js" target="_blank">স্যাট একাডেমি জাভাস্ক্রিপ্ট</a></p>
</body>
</html>বিঃদ্রঃ ভালো ফলাফলের জন্য লিংক স্টাইলের এই ক্রম অবশ্যই অনুসরণ করতে হবে।
লিংকের বিভিন্ন অবস্থার জন্য পৃথকভাবে স্টাইল সেট করতে হলে নিচের নিয়ম দুটি মেনে চলতে হবে।
a:link এবং a:visited এর পরে a:hover ব্যবহার করতে হবে।a:hover এর পরে a:active ব্যবহার করতে হবে।লিংকের ব্যাকগ্রাউন্ড-কালার সেট করার জন্য background-color প্রোপার্টি ব্যবহার করা হয়।
a:link {
background-color: lawngreen;
}
a:visited {
background-color: green;
}
a:hover {
background-color: lightsalmon;
}
a:active {
background-color: hotpink;
}লিংক থেকে আন্ডারলাইন মুছে ফেলার জন্য text-decoration প্রোপার্টির ভ্যালু none ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a></p>
</body>
</html>লিংককে বক্স বা বাটনের মত তৈরি করার জন্য অতিরিক্ত যে সিএসএস প্রোপার্টি ব্যবহার করা হয় তা নিম্নের উদাহরণে দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a {
background-color: #f010f0;
color: black;
padding: 20px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
}
</style>
</head>
<body>
<a href="../index.php" target="_blank">স্যাট একাডেমি</a>
</body>
</html>বিঃদ্রঃ আমরা চাইলে এই বাটনটির মধ্যে লিংকের বিভিন্ন অবস্থা(state) প্রয়োগ করতে পারবো।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
